<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>编辑失物招领</title>
<link rel="shortcut icon" href="static/image/logo01.ico"/>
<link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="static/easyui/themes/icon.css" rel="stylesheet" />
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<%
	String lostId = request.getParameter("id");
%>
<div data-options="region:'west'" style="width:50%;">
	<table>
		<tr>
			<td>物品类别：</td>
			<td>
				<select class="easyui-combobox" name="goodsType" id="goodsType" style="width: 200px;"></select>
			</td>
		</tr>
		<tr>
			<td>拾取时间：</td>
			<td><input class="easyui-datetimebox" id="lossTime"
				data-options="" style="width: 200px"></td>
		</tr>
		<tr>
			<td style="vertical-align:top">拾取位置：</td>
			<td ><a id="selectLocation" class="easyui-linkbutton"
				data-options="iconCls:'icon-search'">选择位置</a>先点击右侧地图的确认按钮，再点击此确认按钮<br /> 
				<input class="easyui-textbox" type="text" name="lng" id="lng" data-options="editable:false"></input>经度
				<br/> 
				<input class="easyui-textbox" type="text" name="lat" id="lat" data-options="editable:false"></input>纬度 
				<br/> 
				<input class="easyui-textbox" type="text" value="" name="lossLocation" id="lossLocation" data-options="editable:false" style="width: 500px"></input>地点
			</td>
		</tr>
		<tr>
			<td style="vertical-align:top">详情：</td>
			<td><input class="easyui-textbox" id="description" data-options="multiline:true" style="width:400px;height:100px"></input></td>
		</tr>
		<tr>
			<td>上传照片：</td>
			<td><input class="easyui-filebox" id="file" name="file" data-options="buttonText:'选择文件'" style="width:300px">
			若不上传，则默认不更新图片
				<br/>
				<label id="fileName"></label>
			</td>
		</tr>
		<tr>
			<td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submit()" >提交</a></td>
		</tr>
	</table>
</div>
<div data-options="region:'center'" style="padding:20px">
	<iframe class="map-iframe" src="manage/amap.jsp" frameborder="no"   border="no" height="100%" width="100%" scrolling="auto"></iframe>
</div>

	

	<script>
	$(function() {
		// 页面进来加载物品类别下拉条
		$.ajax({
			type: "get",
			url: "goodsType/list",
			success: function(response) {
				$('#goodsType').combobox({
					data: response.data,
					valueField: 'id',
					textField: 'name'
				});
				// 加载失物招领信息
				$.ajax({
					type: "get",
					url: "lost/get.do",
					data: {id: "<%=lostId%>"},
					success: function(response) {
						console.log(response);
						$('#goodsType').combobox('setValue', response.data.goodsTypeId);
						$('#lossTime').datetimebox('setValue', response.data.lostTime);
						$('#lng').textbox('setValue', response.data.lng);
						$('#lat').textbox('setValue', response.data.lat);
						$('#lossLocation').textbox('setValue', response.data.address);
						$('#description').textbox('setValue', response.data.description);
					}
				})
			}
		})
		// 点击拾取位置 在文本框添加经纬度和位置信息
		$('#selectLocation').bind('click', function(){
			// 从localStorage中获取
			$('#lng').textbox('setValue', localStorage.lng);
      	    $('#lat').textbox('setValue', localStorage.lat);
            $('#lossLocation').textbox('setValue', localStorage.address);
		});
		// 用户上传图片事件
		$('#file').filebox({'onChange': function(e) {
			// 获取到文件对象
			var file0 = $("#file").filebox("files")[0];
			var formData = new FormData();
			formData.append("file", file0);
			// 将文件直接上传到后台
			$.ajax({
				type: "post",
				url: "fileUpload",
				data: formData,
				processData: false,
				contentType: false,
				success: function(response) {
					// 将文件框的内容设置成为文件名
					$('#fileName').text(response.data);
				}
			})
		}})
	})
	// 提交表单
	function submit() {
		var goodsType = $('#goodsType').combobox('getValue');
		var lossTime = $('#lossTime').val();
		var lng = $('#lng').val();
		var lat = $('#lat').val();
		var address = $('#lossLocation').val();
		var description = $('#description').textbox('getValue');
		var fileName = $('#fileName').text();
		// 提交到后台
		$.ajax({
			url: "lost/update.do",
			type: "post",
			data: {
				"id": "<%=lostId%>",
				"goodsType": goodsType,
				"lossTime": lossTime,
				"lng": lng,
				"lat": lat,
				"address": address,
				"description": description,
				"fileName": fileName
			},
			success: function(response) {
				var message = response.message;
				if (response.code == 0) {
					message += ",请关闭后刷新";
				}
				$.messager.show({
					title:'提示',
					msg: message,
					showType:'show',
					timeout:1500,
					style:{
						right:'',
						top:document.body.scrollTop+document.documentElement.scrollTop,
						bottom:''
					}
				});		
			}
		});
	}
	
	</script>
</body>
</html>